<%-- 
    Document   : subject
    Created on : 2015-5-26, 15:10:26
    Author     : 0
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jspf/import.jspf" %>
<!doctype HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<title> 编辑导语 </title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="WangCaixia_gz none"/>
<link rel="stylesheet" type="text/css" href="http://js.3conline.com/wap/pcauto/2015/0522wap1_1/topic.css">
</head>
<body class="g-doc">
  <!-- 公共头部 --> 
        <%@include file="../common/intf6007.html" %>
        <!-- 公共头部end -->
<div class="header-bg">
    <a href="http://m.pcauto.com.cn" class="header-home" title="太平洋汽车网"></a>
    <div class="header-title">
        <span class="header-title-nav">
            <a href="http://m.pcauto.com.cn/club/">车友会</a> &gt;<a href="${WAPROOT}/topic/${subject.subjectId}.html">${fn:escapeXml(subject.title)}</a>
        </span>
    </div>
</div>
<div class="g-bd">
	<div class="publish-box clf">
            <textarea name="" id="J-txt-publish" placeholder="请输入话题导语..." maxlength="500">${subject.introduction}</textarea>
	    <div class="pub-tools" id="J-pub-tools">
	        <div class="clf">
	            <span class="m-face-pic-btn clf" id="JfatieTfFaceBtn">
	                
	                <i class="m-pic-btn" id="J-pic-btn">
	                    <input type="file" name="picfile0" id="uploadFirst" class="picfile" onchange="firstUpload(this)" accept="image/*">
	                </i>
	            </span>
	            <div class="cel-sub-btn clf">
	                <i class="cancel-btn">取消</i>
	                <i class="submit-btn" onclick="updateIntroduction();" id="submitBtn">发布</i>
	            </div>
	        </div>
	        <div class="m-face-list"></div>
	    </div>
	    <div class="pic-upload clf" id="J-upload" ${empty subjectPhoto?'style="display:none;"':''}>
                <div  id="J-picWrap">
                    <c:forEach items="${subjectPhoto}" var="photo" varStatus="status">
                        <div class="item" id="imgDivpicfile${status.index}">
	    		<img src="${photo.url134x134}" data-url="${photo.url}" data-isCover ="0" data-logo="${photo.url134x134}">
                       <i onclick="setCover(this);" style="display:none;">设为封面</i>
	    		<span onclick="removePhoto('imgDivpicfile${status.index}')"></span>
                        </div>
                    </c:forEach>
                 </div>
	        <div class="picfile-wrap" id="J-picfileWrap">
                    <input onchange="changeEvent(this)" class="picfile" type="file" accept="image/*" id="picfile${fn:length(subjectPhoto)}" name="picfile2">
	        </div>
	    </div>
	</div>
</div>
<!-- 公共底部 --> 
 <%@include file="../common/intf5987.html" %>
 <!-- 公共底部end --> 
 <script type="text/javascript" src="http://js.3conline.com/wap/pcauto/common/zepto1.1.6.min.js" ></script>
 <script class="defer" src="http://js.3conline.com/wap/pcauto/2013/bbs/bbs_core.js" type="text/javascript" charset="utf-8"></script>
 <script>
     var updateUrl = "${WAPROOT}/subject/updateIntroduction.do";
     var logoSize = "134x134";
     var isSubmit = false;
     var isCover = 1;
     var notCover = 0;
     function initHover(){
        var item = $("#J-picWrap .item ").eq(0);
        if(item.find("img").attr("data-isCover") == notCover){
            item.find("i").show();
        }
        $("#J-picWrap .item i").on("click",function(event){
            setCover(event.target);
        });
        if(getImagesSize()>4){
            setCover($("#J-picWrap .item img").eq(0).next("i"));
        }
     }
    UPC.init({
        localProxy: '/favicon.ico',
        upcPath: "${UPCROOT}",
        command: [ 53017,53020,53038],
        application: "autoclub"
    });
    var picWrap = document.getElementById("J-picWrap");
    var picfileWrap = document.getElementById("J-picfileWrap");
    function createLoadingWarp(id){
        var picDiv = document.createElement("div");
        picDiv.className="item";
        picDiv.id = "imgDiv"+id;
         picDiv.setAttribute("isUpload",true);
        var img = document.createElement("img");
        var spanDiv  = document.createElement("span");
        picDiv.appendChild(img);
        picDiv.appendChild(spanDiv);
        picWrap.appendChild(picDiv);
    }
    function filterContent(content){
        return content.replace(/\n/ig,"<br>");
    }
    function updateIntroduction(){
        var content = $("#J-txt-publish").val();
        if(content == ""){
            showTips("请输入内容");
            return false;
        }
        if(content.length>500){
            showTips("内容不能超过500字");
            return false;
        }
        if(isSubmit){
            return false;
        }
        setDisabledBtn(true);
        //当图片上传超过五张时(没有算上封面图)默认选择第一张为封面
        if( getImagesSize() > 4 ){
            $($("#J-picWrap img[data-isCover='0']")[0]).attr("data-isCover",1);
        }
        content = filterContent(content);
        var images = getImages();
        var cover = getCover();
        $.ajax({
            url:updateUrl,
            data:{introduction:content,subjectId:"${subject.subjectId}",images:images,cover:cover},
            type:"post",
            dataType:"json",
            success:function(data){
                setDisabledBtn(false);
                if(data.code==0){
                    showTips("保存成功");
                }else{
                    showTips(data.message);
                }
            },
            error:function (data){
                setDisabledBtn(false);
                showTips(data.message);
            }
        });
    }
        function firstUpload(obj){
                if(!obj){
                    return;
                }
                var f = $("#J-pic-btn");
                $('#J-upload').show();
                changeEvent(obj);
                f.click(function(){
                    $('#J-upload').toggle();
                });
            }
            function changeEvent(obj){
                if(!obj){
                    return;
                }
                if($("#J-picWrap .item").length==5){
                    showTips("最多只能上传5张图片");
                    return;
                }
                obj.style.display = "none";
                createInput();
                createLoadingWarp(obj.id);
                doUpload(obj.id);
            }
            function setDisabledBtn(flg){
                if(flg){
                    $("#submitBtn").removeClass("submit-btn");
                    $("#submitBtn").addClass("cancel-btn");
                }else{
                    $("#submitBtn").removeClass("cancel-btn");
                    $("#submitBtn").addClass("submit-btn");
                }
                isSubmit = flg;
            }
            function doUpload(fileId){
                setDisabledBtn(true);
                UPC.post({
                    url: "/upload_quick.jsp",
                    data: {
                        rotate: 0,
                        keepSrc: 'true',
                        readExif: 'yes'
                    },
                    file: [fileId],
                    complete: function (json) {
                        picWrap.querySelector("#imgDiv"+fileId).removeAttribute("isUpload");
                        if (json.retCode == 0) {
                            if(!picWrap.querySelector("#imgDiv"+fileId)){//上传一半取消
                                return;
                            }
                            var index = 0;
                            //logo URL
                            var logoUrl = "";
                            for(var i = 0;i<json.files.length;i++){
                                if(json.files[i].url.indexOf("1024x1024")!=-1){
                                    index=i;
                                }
                                if(json.files[i].url.indexOf(logoSize)!=-1){
                                    logoUrl = json.files[i].url;
                                }
                            }
                            var obj = new Object();
                            obj.url = json.files[index].url;
                            obj.width = json.files[index].width;
                            obj.height = json.files[index].height;
                            var html='<img src="' +logoUrl + '" data-url="'+obj.url+'" data-isCover = "0" data-logo="'+logoUrl+'"/><i style="display:none;">设置封面</i><span onclick=removePhoto("imgDiv'+fileId+'");></span>';
                            picWrap.querySelector("#imgDiv"+fileId).innerHTML = html; //传图成功插入图片
                            initHover();
                        } else {
                            picWrap.removeChild(picWrap.querySelector("#imgDiv"+fileId));
                            showTips("上传失败");
                        }
                        if(!isUploading()){
                            setDisabledBtn(false);
                        }
                    }
                });
            }
             var idNum = "${fn:length(subjectPhoto)}";
             function createInput() {
                idNum++;
                var inputEle = document.createElement("input");
                inputEle.setAttribute("onchange", "changeEvent(this)");
                inputEle.className = 'picfile';
                inputEle.type = 'file';
                inputEle.accept = 'image/*'; //只限定图片
                inputEle.id = "picfile" + idNum;
                inputEle.name = "picfile" + idNum;
                picfileWrap.appendChild(inputEle);
            }
            function getImages(){
                var array = "[";
                $("#J-picWrap img[data-isCover='0']").each(function(index){
                    var imgUrl = $(this).attr("data-url");
                    if(imgUrl!=null){
                        array += "{url:'"+imgUrl+"',seq:"+(index+1)+"}";
                    }
                })
                array+="]";
                return array;
            }
            function getImagesSize(){
                return $("#J-picWrap img[data-isCover='0']").length;
            }
            function getCover(){
                var cover = $("#J-picWrap img[data-isCover='1']");
                if(cover.length>0){
                    return cover.attr("data-logo");
                }
            }
            /**
             * 是否正在上传
             */
            function isUploading(){
               return $("#J-picWrap div[isUpload='true']").length>0;
            }
            /**
             *设置封面
             */
            function setCover(obj){
                if(!obj){
                    return;
                }
                clearCover();
                $(obj).prev().attr("data-isCover",1);
                $(obj).html("封面");
                $(obj).unbind("click");
            }
            function clearCover(){
                var cover = $("#J-picWrap img[data-isCover='1']");
                if(cover.length>0){
                    cover[0].setAttribute("data-isCover","0"); 
                }
            }
            /**
             * 删除图片
             */
            function removePhoto(objId){
                picWrap.removeChild(picWrap.querySelector("#"+objId));
                initHover();
            }
             /*各种提示*/
            function showTips(msg){
                var tips = document.getElementById('Jtips');
                if(!tips) {
                    tips = document.createElement('div');
                    tips.id = 'Jtips';
                    tips.className = 'm-tips';
                    document.body.appendChild(tips);
                }
                tips.innerHTML = msg;
                tips.style.display = 'block';
                var tips_width = tips.clientWidth/2;
                tips.style.marginLeft = '-'+tips_width+'px';
                tips.style.opacity = 1;    
                setTimeout(function(){
                    tips.style.webkitTransition = 'all 0.3s ease-in';
                    tips.style.opacity = 0;
                    tips.style.marginTop = '-80px';
                    setTimeout(function(){
                        tips.style.display = 'none';
                        tips.style.marginTop = '-40px';
                    }, 300);
                }, 2000);
            }
            initHover();
 </script>
</body>
</html>